<template>
    <div>

        <div v-if="userData.info && userData.info.FIsMian == 1">
            <div class="bind_success" v-if="accountInfo.subUserId">
                <text class="success-icon yticon icon-xuanzhong2"></text>
                <p>您已成功绑定【{{accountInfo.mainUserName}}】</p>
                <button class="bind_btn unbind" @click="unBind">解绑</button>
            </div>
            <div class="bind_success" v-else>
                <p style="line-height: 100rpx"> 本账号为主账号，无需绑定 </p>
            </div>
        </div>
        <div v-else class="bind_account">
            <p class="tip">填写需要绑定的主账号账号密码</p>
            <view class="form_box">
                <view class="form_item">
                    <text class="span">账号：</text>
                    <view class="value">
                        <input v-model="account" placeholder-style="color: #ccc" placeholder="输入账号" />
                    </view>
                </view>
                <view class="form_item">
                    <text class="span">密码：</text>
                    <view class="value">
                        <input v-model="password" type="password" placeholder-style="color: #ccc" placeholder="输入密码" />
                    </view>
                </view>
                <button class="bind_btn" @click="confirmBind">绑定并重新登录</button>
            </view>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { bindMainUser, unBindMainUser } from '@/api/user';
import { logout } from '@/hooks/login';
import md5 from 'js-md5'
import interact from "@/utils/interact";
export default {
    name: "",
    components: {},
    data() {
        return {
            account: '',
            password: '',
        }
    },
    computed: {
        ...mapState({
            userData: state => state.user.info,
            accountInfo: state => state.user.account,

        })
	},
    mounted() {
    },
    methods: {
        confirmBind() {
            if(!this.account) interact.toast('请输入账号')
            if(!this.password) interact.toast('请输入密码')
            bindMainUser({
                loginAccount: this.account,
                password: md5(this.password),
            }).then(this.relogin)
        },
        unBind() {
            interact.modal({
                title: '提示',
                content: '是否解绑？',
                showCancel: true
            }).then(action => {
                if(action.confirm) {
                    unBindMainUser().then(this.relogin)
                }
            })
        },
        relogin() {
            uni.reLaunch({ url: '/pages/user' })
            setTimeout(() => {
                logout()
            }, 20)
        }
    }
}
</script>
<style lang="scss" scoped>
.bind_success{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx;
    >p{
        color: red;
    }
    .success-icon{
		font-size: 160rpx;
		margin-top: 100rpx;
        color: $baseColor;
	}

}
.bind_account{
    width: 680rpx;
    margin: 50rpx auto;
    background: #fff;
    // height: 500rpx;
    border-radius: 10rpx;
    padding: 30rpx 40rpx 50rpx;
    box-shadow: 0 0 10rpx #999;
    .tip{
        padding: 10rpx 20rpx;
        font-size: 28rpx;
        color: #999;

    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
    }
    .form_box{
        background: #fff;
        border-radius: 6rpx;
        margin: 0 auto;
        margin: 0 auto;
        padding: 20rpx;
        position: relative;
        .form_item {
            width: 100%;
            height: 80rpx;
            border: 1px solid #ddd;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
            .value{
                flex: 1;
                height: 100%;
                input{
                    width: 100%;
                    height: 100%;
                }
            }
        }

    }

}
.bind_btn{
    width: 100%;
    height: 80rpx;
    margin-top: 50rpx;
    border-radius: 10rpx;
    background: #fff;
    border: 1px solid #ddd;
    color: #fff;
    font-size: 28rpx;
    background-color: $baseColor;
}

.unbind{
    width: 660rpx;
    margin: 50rpx auto;
    border-color: red;
    color: red;
}

</style>
